<template>
  <page-container :title="route.meta.title">
    <SearchTable
      ref="tableRef"
      :table-list-api="tableListApi"
      :columns="columns"
      :show-selection="true"
      :convert-from-response="res => res.data"
    >
      <template #tableBtns="{ selectedRowsData }">
        <a-button type="primary" :disabled="!selectedRowsData.length" @click="handleExport(selectedRowsData)">
          导出
        </a-button>
      </template>
    </SearchTable>
  </page-container>
</template>

<script setup lang="tsx">
import { useRoute } from 'vue-router';
import request from '@/utils/request';
import { exportAdData } from '@/api/dataStatistic';
import type { IColumn, IOption, IRow } from '@/types';
import SearchTable from '@/components/SearchTable';
interface IOriginOption {
  id: string;
  name: string;
  [k: string]: any;
}

const route = useRoute();
const tableListApi = '/v1/data/list';
const tableRef = ref();

const columns = computed<IColumn[]>(() => [
  {
    title: '日期',
    dataIndex: 'date',
    readonly: true,
  },
  {
    title: '媒体方',
    dataIndex: 'media_id',
    type: 'enum',
    required: true,
    searchable: true,
    options: mediaOptions.value,
    customRender: ({ record }) => {
      const found = mediaOptions.value.find(option => option.value === record.media_id);
      return found?.label || '';
    },
  },
  {
    title: '应用',
    dataIndex: 'app_id',
    type: 'enum',
    required: true,
    searchable: true,
    options: appOptions.value,
    customRender: ({ record }) => {
      const found = appOptions.value.find(option => option.value === record.app_id);
      return found?.label || '';
    },
  },
  {
    title: '广告位',
    dataIndex: 'ad_site_id',
    type: 'enum',
    required: true,
    searchable: true,
    options: adSiteOptions.value,
    customRender: ({ record }) => {
      const found = adSiteOptions.value.find(option => option.value === record.ad_site_id);
      return found?.label || '';
    },
  },
  {
    title: '广告位id',
    dataIndex: 'ad_site_id',
  },
  {
    title: '广告位状态',
    dataIndex: 'ad_site_status',
  },
  {
    title: '请求数', //必填
    dataIndex: 'request_count',
  },
  {
    title: '填充数',
    dataIndex: 'fill_count',
  },
  {
    title: '展示数',
    dataIndex: 'imp_count',
  },
  {
    title: '点击数',
    dataIndex: 'click_count',
  },
  {
    title: '填充率',
    dataIndex: 'fill_rate',
  },
  {
    title: '点击率',
    dataIndex: 'click_rate',
  },
  {
    title: '展示率',
    dataIndex: 'imp_rate',
  },
  {
    title: 'DAU',
    dataIndex: 'dau',
  },
  {
    title: 'ecpm',
    dataIndex: 'ecpm',
  },
  {
    title: '媒体预估收益',
    dataIndex: 'revenue',
  },
]);
const mediaOptions = ref<IOption[]>([]);
const appOptions = ref<IOption[]>([]);
const adSiteOptions = ref<IOption[]>([]);
const setMediaOptions = async () => {
  const data = await request.get('/v1/media/list', { params: { page: 1, page_size: 100 } });
  mediaOptions.value = (data.data.list as IOriginOption[]).map(({ id, name }) => ({ label: name, value: id }));
};
setMediaOptions();
const setAppOptions = async () => {
  const data = await request.get('/v1/app/list', { params: { page: 1, page_size: 100 } });
  appOptions.value = (data.data.list as IOriginOption[]).map(({ id, name }) => ({ label: name, value: id }));
};
setAppOptions();

const setAdSiteOptions = async () => {
  const data = await request.get('/v1/adsite/list', { params: { page: 1, page_size: 100 } });
  adSiteOptions.value = (data.data.list as IOriginOption[]).map(({ id, name }) => ({ label: name, value: id }));
};
setAdSiteOptions();
const handleExport = (selectedRowsData: IRow[]) => {
  const ids = selectedRowsData.map(({ id }) => id);
  exportAdData(ids);
};
</script>
